<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useClassStore } from '../../store';
import { useDictionaryStore } from '../../store';
import ClassAdd from './ClassAdd.vue';
import { ref } from 'vue';
import { ApiClass } from '../../api';
import { ElMessage, ElMessageBox } from 'element-plus';
import ClassUpdate from './ClassUpdate.vue';
import ClassBegin from './ClassBegin.vue';

const{list,model}=storeToRefs(useClassStore())
const{queryHandler}=useClassStore()
const{ classMajorList}=storeToRefs(useDictionaryStore())
const{classRoomList}=storeToRefs(useClassStore())
const addRef=ref<InstanceType<typeof ClassAdd>>()
const updateRef=ref<InstanceType<typeof ClassUpdate>>()
const beginRef=ref<InstanceType<typeof ClassBegin>>()
const changeHandler=(currentPage:number,pageSize:number)=>{
  model.value.begin = (currentPage - 1) * pageSize;
  model.value.pageSize = pageSize;
  queryHandler() 
}
const addHandler=async(data:API.Class.Add)=>{
  await ApiClass.add(data)
  queryHandler()
addRef.value?.end();
ElMessage({type:"success",message:"添加成功"})
}
const updateHandler=async(data:API.Class.Update)=>{
    await ApiClass.update(data)
    queryHandler()
    updateRef.value?.end();
    ElMessage.success("修改成功")
}
const endHandler=async(data:API.Class.End)=>{
    await ElMessageBox.confirm("确定要结课吗？","提示",{
        type:"warning"
    })
  await ApiClass.end(data)
  queryHandler()
  ElMessage.success("结课成功")
}
const beginHandler=()=>{
  queryHandler()
}
</script>

<template>
    <el-form ref="form" :model="list?.list" label-width="80px">
        <el-form-item label="班级名称">
            <el-input v-model="model.cls_name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="班级专业">
           <el-select v-model="model.cls_dic_id_major"style="width: 200px;">
            <el-option label="所有" :value="0"></el-option>
               <el-option v-for="item in classMajorList" :key="item.dic_id" :label="item.dic_name" :value="item.dic_id">
               </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="开课状态" >
            <el-select  v-model="model.cls_status" style="width: 200px;">
                <el-option   :value="0" label="全部"></el-option>
                <el-option   :value="1" label="开课中"></el-option>
                <el-option   :value="2" label="未开课"></el-option>
                <el-option   :value="3" label="结课"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item >
            <template #default>
                <el-button type="primary" @click="queryHandler()">查询</el-button>
                <el-button type="success" @click="addRef?.begin()">增加</el-button>
            </template>
        </el-form-item>
    </el-form>
<el-table ref="form" :data="list?.list" label-width="80px">
    <el-table-column label="序号" type="index" width="80"></el-table-column>
    <el-table-column label="班级名称" prop="cls_name"></el-table-column>
    <el-table-column label="专业" prop="cls_dic_id_major">
    <template #default="scoped">
        {{ classMajorList?.find((item:UI.Dictionary)=>{return item.dic_id===scoped.row.cls_dic_id_major})?.dic_name}}
    </template>
    </el-table-column>
    <el-table-column label="教学老师" prop="cls_stf_id_teacher_name"></el-table-column>
    <el-table-column label="教务老师" prop="cls_stf_id_admin_name"></el-table-column>
    <el-table-column label="就业老师" prop="cls_stf_id_job_name"></el-table-column>
    <el-table-column label="教室" prop="cls_dic_id">
        <template #default="scoped">
            {{ classRoomList?.find((item:UI.Get)=>{return item.clsr_id===scoped.row.cls_clsr_id})?.clsr_name}}
        </template>
    </el-table-column>
    <el-table-column label="开课时间" prop="cls_begin"></el-table-column>
    <el-table-column label="结课时间" prop="cls_end"></el-table-column>
    <el-table-column label="班级状态" >
        <template #default="scoped">
        {{ scoped.row.cls_begin?(scoped.row.cls_end?'已结班':'进行中'):'未开班' }}
        </template>
    </el-table-column>
    <el-table-column label="备注" prop="cls_remark"></el-table-column>
    <el-table-column label="操作" width="200">
        <template #default="scoped">
            <el-button type="primary" size="mini" @click="updateRef?.begin(scoped.row)">修改</el-button>
            <el-button type="danger" size="mini" v-if="scoped.row.cls_begin&&!scoped.row.cls_end" @click="endHandler(scoped.row)">结课</el-button>
            <el-button type="success" size="mini" v-else-if="!scoped.row.cls_begin" @click="beginRef?.begin(scoped.row)">开课</el-button>
        </template>
    </el-table-column>
</el-table>
<div class="page">
    <el-pagination 
    layout="prev, pager, next,->,sizes,total" 
    :total="list?.total"
    v-model:page-size="model.pageSize"
    :page-sizes="[3,5,7,9,20]"
@change="changeHandler"
    >
    </el-pagination>
</div>
<class-add ref="addRef" @save="addHandler"></class-add>
<class-update ref="updateRef" @save="updateHandler"></class-update>
<class-begin ref="beginRef" @save="beginHandler"></class-begin>
</template>



<style scoped>
.el-form{
    display: flex;
}
.page{
    position: absolute;
    bottom: 20px;
    width:calc(100% - 40px);
    
}
</style>